<template>
  <Modal
      :draggable="!this.$config.mask"
      :mask="this.$config.mask"
      :mask-closable="!this.$config.mask"
      :value="value"
      @on-visible-change="visibleChange"
      :width="1000"
      id="form-scheme-modal"
  >
    <p slot="header">
      表单模板预览：{{ modalData.formScheme.schemeName }}
    </p>

    <form-build ref="form0" :form-template="JSON.parse(modalData.formScheme.schemeContent)" :models="models"
                :disabled="disabled" :render-preview="render" v-if="modalData.formScheme.formType===0"></form-build>
    <component ref="form1" :is="modalData.formScheme.schemeContent" v-if="modalData.formScheme.formType===1 && !render"
               :data="data" :disabled="disabled"></component>
    <component ref="form1" :is="modalData.formScheme.schemeContent + 'Render'"
               v-if="modalData.formScheme.formType===1 && render" :data="data"></component>
    <div slot="footer">
      <Button :icon="disabledIcon" :type="disabledType" @click="handleDisabled" :disabled="disabledDisabled">
        {{ disabledDisplay }}
      </Button>
      <Button :icon="renderIcon" :type="renderType" @click="handleRender">{{ renderDisplay }}</Button>
      <Button icon="md-close" @click="cancel">关闭</Button>
    </div>
  </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';


@Component({
  components: {},
})
export default class FormSchemeModal extends AbpBase {
  name: string = 'FormSchemeModal';

  @Prop({type: Boolean, default: false}) value: boolean;
  @Prop({type: Object, default: {}}) modalData: any;

  models: any = {};
  data: any = {};
  disabled: boolean = false;
  disabledDisplay: string = '禁用表单';
  disabledDisabled: boolean = false;
  disabledIcon: string = 'ios-hand';
  disabledType: string = 'warning';
  render: boolean = false;
  renderDisplay: string = '渲染表单';
  renderIcon: string = 'ios-aperture';
  renderType: string = 'primary';

  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.reset();
      this.$emit('input', value);
    } else {
    }
  }

  handleDisabled() {
    this.disabled = !this.disabled;
    if (this.disabled) {
      this.disabledDisplay = '解除禁用';
      this.disabledIcon = 'ios-hand-outline';
      this.disabledType = 'success';
    } else {
      this.disabledDisplay = '禁用表单';
      this.disabledIcon = 'ios-hand';
      this.disabledType = 'warning';
    }
  }

  handleRender() {
    this.render = !this.render;
    if (this.render) {
      this.renderDisplay = '解除渲染';
      this.disabledDisabled = true;
      this.renderIcon = 'ios-aperture-outline';
      this.renderType = 'success';
    } else {
      this.renderDisplay = '渲染表单';
      this.disabledDisabled = false;
      this.renderIcon = 'ios-aperture';
      this.renderType = 'primary';
    }
  }


  reset() {
    this.disabled = false;
    this.disabledDisplay = '禁用表单';
    this.disabledDisabled = false;
    this.disabledIcon = 'ios-hand';
    this.disabledType = 'warning';
    this.render = false;
    this.renderDisplay = '渲染表单';
    this.renderIcon = 'ios-aperture';
    this.renderType = 'primary';
  }


  mounted() {
  }

  created() {
  }
}
</script>

<style lang="less" scoped>
#form-scheme-modal::v-deep .ivu-modal-body {
  height: 542px;

}

#form-scheme-modal::v-deep .ivu-modal-body::-webkit-scrollbar {
  width: 4px;
  background-color: #fff;
}

#form-scheme-modal::v-deep .ivu-modal-body::-webkit-scrollbar-thumb {
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  background-color: #e8eaec;
}

#form-scheme-modal::v-deep .ivu-modal-body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
  border-radius: 2px;
  background-color: #fff;
}
</style>
